<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
<!--  Vue CDN引入-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<!--  Vue 本地文件引入-->
<!--    <script type="text/javascript" src="js/vue.js"></script>-->
</head>
<body>
  <div id="app">
<!--    Vue的插值表达式，将表达式的值输出到html页面-->
    <h1>{{hello}}</h1>
    <h2>{{test}}</h2>
    {{name}}<br>
    {{school.name}}{{school.mobile}}<br>
    <ul>
      <li>{{names[0]}}</li>
      <li>{{names[1]}}</li>
    </ul>
      <h3>-------------Vue指令------------</h3>
      <h3>{{msg}}你好</h3>
<!--      1.v-text-->
      <h3 v-text="msg">哈哈</h3>
      <h3 v-text="msg+123">哈哈</h3>
      <h3 v-text="msg+abc">哈哈</h3>
<!--      2.v-html-->
      <h3 v-text="url">3333</h3>
      <h3 v-html="url">4444</h3>
<!--      3.v-on-->
<!--      绑定点击事件-->
      <input type="button" value="点击" v-on:click="show">
<!--      简写-->
      <input type="button" value="点击" @click="show">
<!--      绑定双击事件-->
      <input type="button" value="双击" @dblclick="show">
      <!--      绑定点击事件-->
        <h3 @click="changeFood()">{{food}}</h3>
      <div @click="addNum">
          <h3>{{num}}</h3>
<!--          .stop修饰符，阻止冒泡-->
          <button @click.stop="addNum">自增</button>
      </div>

      <a href="https://www.baidu.com" @click="getMsg">度娘</a>
<!--      .prevent修饰符，阻止默认行为-->
      <a href="https://www.baidu.com" @click.prevent="getMsg">度娘</a>
      <br>
      <form action="https://www.baidu.com">
          <input name="name"><br>
          <input type="submit" value="提交" @click.prevent="submit">
      </form>
<!--        键盘事件   修饰符-->
      <input type="text" name="name" v-on:keyup="handler" placeholder="默认都生效，按任何键">
      <input type="text" name="name" @keyup.enter="handler" placeholder="按回车生效">
      <input type="text" name="name" @keyup.space="handler" placeholder="按空格生效">

  </div>


</body>
<script>
    //var   变量 没有作用域的概念
    //let   变量 有作用的的概念-局部变量
    //const 常量

    //实例化vue对象
    const app = new Vue({
        //定义el元素  vue实例的挂载的元素节点，声明在哪个位置使用vue
        el:"#app",
        data: {
            num:100,
            food:"food",
            msg:"测试v-text指令",
            url:"<a href='https://www.baidu.com'>百度一下你就知道</a>",
            hello:"hello vue",
            test:"这是个vue测试",
            name:"山西大学",
            school:{
                name:"山大",
                mobile:"123"
            },
            //数组
            names:["张三","李四"]
        },
        methods:{
            // show:function (){
            //     alert("今天周一")
            // }
            show(){
                alert("今天周一")
            },
            changeFood(){
                //使用this. 获取data的数据
                //在vue中不需要考虑如何更改dom，只需要关注修改数据，更行数据后，使用数据
                alert(this.food);
                this.food="fruit";
            },
            addNum:function (){
                this.num++;
            },
            getMsg:function (){
                alert("message");
            },
            submit:function (){
                alert("提交不过去");
            },
            handler:function (){
                alert("生效");
            }
        }
    });
</script>
</html>